<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>比赛信息 | 及第竞赛网</title>
    <link rel="stylesheet" href="../css/first.css"/>
    <link rel="stylesheet" href="../css/font-awesome.min.css">

</head>

<body>
<div class="container" id="information">
    <header class="header">
        <div class="brand">
            <div class="brand-icon">
                <a href="home.html">
                    <span>及第</span>竞赛网
                </a>
            </div>
        </div>
        <nav class="nav">
            <div class="nav-menu">
                <ul>
                    <li class="nav-btn">
                        <a href="home.html">首页</a>
                    </li>
                    <li class="nav-btn">
                        <a href="noticeOfContest.html">比赛公告</a>
                    </li>
                    <li class="nav-btn">
                        <a href="informationOfContest.html">比赛信息</a>
                    </li>
                    <li class="nav-btn">
                        <a href="newsOfContest.html">比赛资讯</a>
                    </li>
                    <!--<li class="nav-btn">-->
                        <!--<a href="">报名</a>-->
                    <!--</li>-->
                </ul>
            </div>
        </nav>
    </header>
    <div class="banner">
        <div class="banner-img">
            <img id="news-img01" src="../img/news01.png" alt="news01">
            <img id="news-img02" src="../img/news02.png" alt="news02">
        </div>
        <div class="banner-switch-left"><span><i class="fa fa-chevron-left"></i></span></div>
        <div class="banner-switch-right"><span><i class="fa fa-chevron-right"></i></span></div>
    </div>
    <section class="content">
        <section class="section">
            <div class="section-header">
                <div class="section-title">比赛信息 <span style="color: #7a7a7a;">/ InformationOfContest</span></div>
            </div>
            <div class="section-body">
                <div class="section-list-text">
                    <ul class="list-container" v-for='match in matchLists'>
                        <li>
                            <div class="list-header">
                                <a href="javascript:void(0)" @click="getOnematchCookie(match.deId)" class="list-title" >{{match.title}}</a>
                            </div>
                            <div class="list-body">
                                <a v-html="match.content" style="height: 80px" href="javascript:void(0)" @click="getOnematchCookie(match.deId)">
                                </a>
                            </div>
                            <div class="list-footer">
                                <a href="javascript:return false;">{{match.mode}}</a>
                                <a href="javascript:return false;">{{match.releaseTime}}</a>
                                <a href="javascript:return false;"  @click="BM(match.mode,match.deId)" >报名</a>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="section-btn-group">

                    <!--分页导航-->

                    <ul class="pagination">
                        <li>
                            <a @click="getajax(1)">首页</a>
                        </li>
                        <li>
                            <a @click="getajax(page-1)">上</a>
                        </li>
                        <li>
                        <li v-for="value in showpage">
                            <a style="background: red;" @click="getajax(value)" v-if="page==value">
                                {{value}}
                            </a>

                            <a v-else @click="getajax(value)">{{value}}</a>

                        </li>
                        </li>
                        <li>
                            <a @click="getajax(page+1)">下</a>
                        </li>
                        <li>
                            <a @click="getajax(countpage)">尾页</a>
                        </li>
                    </ul>

                    <!--分页导航结束-->
                </div>
            </div>
        </section>
    </section>
</div>
<footer class="footer">
    <p>Copyright © 2018-2019 JIDI All rights reserved.</p>
</footer>

<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/axios.min.js"></script>
<script type="text/javascript" src="../js/cookieUtil.js"></script>
<script type="text/javascript">
    var url1 = 'http://donting.free.idcfengye.com';
    var da = new Vue({
        el: '#information',
        data: {
            count: '', //总记录数
            countpage: '10', //总页数
            page: '1', //当前页
            matchLists: [],
            showpage: '',

        },
        methods: {
            //报名按钮
            BM:function(mode,deId){
                if (mode=="团队") {
                   setCookie('deId',deId,1);
                    document.location = "enterOfTeam.html";
                }
                else if (mode=="个人"){
                    setCookie('deId',deId,1);
                    document.location = "enterOfPerson.html"
                }
            },

            getOnematchCookie: function (id) {
                console.log("xxxcookie" + id);
                setCookie('deId', id, 1);
                document.location = "detailInformation.html";

            },

            getajax: function (page) {
                if (page <= 0) {
                    alert("没有上一页");
                    return;
                }
                if (page > this.countpage) {
                    alert("没有下一页了");
                    return;
                }

                axios.defaults.withCredentials = true;

                axios.get(url1 + '/details/findAllPage', {
                    params: {
                        'page': page
                    }
                }).then(function (response) {
                    var rs = response.data;
                    da.countpage = rs.countpage;
                    da.page = rs.page;
                    da.count = rs.count;
                    da.matchLists = rs.data;
                    var cout = 0;
                    var pa = [];
                    if (rs.page <= 3) {

                        for (var i = 1; i <= da.countpage && cout < 5; i++) {
                            pa.push(i);
                            cout++;
                        }

                    } else {

                        if (rs.countpage - rs.page >= 2) {
                            pa.push(rs.page - 2);
                            pa.push(rs.page - 1);
                            pa.push(rs.page);
                            pa.push(rs.page + 1);
                            pa.push(rs.page + 2);
                        } else {
                            pa.push(rs.countpage - 4);
                            pa.push(rs.countpage - 3);
                            pa.push(rs.countpage - 2);
                            pa.push(rs.countpage - 1);
                            pa.push(rs.countpage);

                        }

                    }
                    da.showpage = pa;

                }).catch(function (error) {
                    alert("all连接超时！");
                });

            }

        },
        mounted() {
            this.getajax(1);

        }

    })
</script>

</body>

</html>